<template>
  <Player />

  <transition appear name="custom-classes-transition" enter-active-class="animate__animated  animate__fadeInDown" leave-active-class="animate__animated  animate__fadeOutUp">
    <Header v-if="IsOnReady" />
  </transition>

  <transition appear name="custom-classes-transition" enter-active-class="animate__animated   animate__fadeInUp" leave-active-class="animate__animated  animate__fadeOutDown">
    <RouterNav v-if="IsOnReady" v-show="!UIShow && !WeatherShow" />
  </transition>

  <div class="wrap" v-if="IsOnReady" v-show="!UIShow && !WeatherShow">
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'

import Player from '@/Layout/Player/Player.vue'
import Header from '@/Layout/Header/Header.vue'
import RouterNav from '@/Layout/RouterNav/RouterNav.vue'

import { useToolsStore } from '@/stores/tools.ts'
import { useDigitalTwinStore } from '@/stores/digitalTwin'
const ToolsStore = useToolsStore()
const DigitalTwinStore = useDigitalTwinStore()

const UIShow = computed(() => ToolsStore.UIShow)
const WeatherShow = computed(() => ToolsStore.WeatherShow)
const IsOnReady = computed(() => DigitalTwinStore.IsOnReady)

defineProps({
  msg: {
    type: String,
    required: false
  }
})
</script>
<style lang="scss" scoped>
.back {
  position: fixed;
  @include Top(20);
  @include Right(220);
  z-index: 102;
}
</style>
